<template>
	<view class="container">
		<view class="wrap">
			<view class="inner">
				<scroll-view class="scroll" scroll-y>
					<form class="form">
						<view class="form_li">
							<view class="form_li_label">所在城市</view>
							<input class="form_li_inp" placeholder="点击选择城市" @click="setCity" v-model="address"
								placeholder-style="color:#999;" />
						</view>

						<view class="form_li">
							<view class="form_li_label">申请分类</view>
							<input class="form_li_inp" placeholder="点击选择分类" :value="jobTypeValue"
								placeholder-style="color:#999;" disabled @click="choseType" />
						</view>

						<view class="form_li">
							<view class="form_li_label">您的姓名</view>
							<input class="form_li_inp" placeholder="请输入" v-model="username" bindinput="setName"
								placeholder-style="color:#999;" />
						</view>
						<view class="form_li">
							<view class="form_li_label">身高(cm)</view>
							<input class="form_li_inp" type="digit" placeholder="请输入您的身高" v-model="height"
								placeholder-style="color:#999;" />
						</view>
						<view class="form_li">
							<view class="form_li_label">体重(kg)</view>
							<input class="form_li_inp" type="digit" placeholder="请输入您的体重" v-model="weight"
								placeholder-style="color:#999;" />
						</view>
						<view class="form_li">
							<view class="form_li_label">您的电话</view>
							<input class="form_li_inp" type="tel" placeholder="请输入" v-model="mobile"
								bindinput="setMobile" placeholder-style="color:#999;" />
						</view>
						<view class="form_li">
							<view class="form_li_label">您的密码</view>
							<input class="form_li_inp" type="number" placeholder="请输入" v-model="password"
								bindinput="setMobile" placeholder-style="color:#999;" />
						</view>
						<view class="form_li">
							<view class="form_li_label">您的年龄</view>
							<input class="form_li_inp" type="tel" placeholder="请输入" v-model="age" bindinput="setAge"
								placeholder-style="color:#999;" />
						</view>
						<view class="form_li">
							<view class="form_li_label">您的性别</view>
							<input class="form_li_inp" placeholder="请选择" disabled :value="gendername" @click="setSex"
								placeholder-style="color:#999;" />
						</view>
						<view class="form_li">
							<view class="form_li_label">您的身份证号</view>
							<input class="form_li_inp" placeholder="请输入" v-model="id_card" bindinput="setCardnum"
								placeholder-style="color:#999;" />
						</view>
						<view class="form_li none_border">
							<view class="form_li_label">您的个人头像</view>
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
								:maxCount="1"></u-upload>
						</view>
						<view class="form_li none_border">
							<view class="form_li_label">您的证书</view>
							<u-upload :fileList="fileList2" @afterRead="afterRead1" @delete="deletePic1" name="2"
								multiple :maxCount="1"></u-upload>
						</view>
						<view class="form_li none_border">
							<view class="form_li_label">您的个人资料</view>
							<u-upload :fileList="fileList3" @afterRead="afterRead2" @delete="deletePic2" name="3"
								multiple :maxCount="10"></u-upload>
						</view>


					</form>
				</scroll-view>
			</view>
		</view>

		<view class="footer">
			<view class="form_btn flex">
				<view class="btn" @click="save">提交申请</view>
			</view>
			<u-picker keyName="label" @cancel="choseTypeCancel" :show="visible" :columns="jobTypeOption"
				@confirm="choseTypeConfirm"></u-picker>
			<u-picker :show="show" :columns="sexList" @confirm="confirm"></u-picker>
		</view>


	</view>

</template>

<script>
	export default {
		data() {
			return {
				height: '',
				weight: '',
				jobType: 0,
				visible: false,
				username: '', //姓名
				mobile: '', //手机号
				password: '',
				age: '', //年龄
				gender: '', //性别
				gendername: '', //性别
				id_card: '', //身份证号
				avatar: '', //个人头像
				certificate: '', //证书照片
				information: '',
				address: '', //地址
				lon: '', //经度
				lat: '', //纬度
				msg: '', //留言建议
				fileList1: [], //图片存放的数组
				fileList2: [], //图片存放的数组
				fileList3: [], //图片存放的数组
				show: false,
				sexList: [
					[{ text: '女', id: 2 }, { text: '男', id: 1 }]
				]
			};
		},
		computed: {
			jobTypeValue() {
				const { jobType, jobTypeOption } = this
				if (jobType === 0) return ''
				const [list] = jobTypeOption
				const target = list.find(item => item.value === jobType)
				if (!target) return ''
				return target.label
			},
			jobTypeOption() {
				return [
					[
						{ label: '茶艺师', value: 1, },
						{ label: '台球助教', value: 2, },
						{ label: '游玩', value: 3 },
						{ label: '观影', value: 4 },
						{ label: '运动', value: 5 },
					]
				]
			}
		},
		methods: {
			choseTypeCancel() {
				this.visible = false
			},
			choseType() {
				this.visible = true
			},
			choseTypeConfirm(ev) {
				const [value] = ev.value
				this.jobType = value.value
				this.visible = false
			},
			setCity() {
				console.log('00');
				let that = this;
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.chooseLocation({
							latitude: latitude,
							longitude: longitude,
							success: function(res) {
								console.log('success', res);
								that.lat = res.latitude;
								that.lon = res.longitude;
								that.address = res.name;
							}
						});
					}
				});
			},

			setSex(e) {
				this.show = true;
			},
			confirm(event) {
				this.gendername = event.value[0].text;
				this.gender = event.value[0].id;
				this.show = false;
			},
			onCancel() {
				this.show = false;
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map(item => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						})
					);
					fileListLen++;
				}
				// console.log(this.fileList1);
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://sanju.xinyunweb.com/api/newupload/postImage',
						// url: 'https://chazhichashi.rchz.top/api/newupload/postImage', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: res => {
							setTimeout(() => {
								resolve(res.data.data);
								let fileList = [];
								fileList.push({
									url: JSON.parse(res.data).data
								});
								let str = '';
								for (let i = 0; i <= fileList.length - 1; i++) {
									str += fileList[i].url + ',';
								}
								if (str.length > 0) {
									str = str.substr(0, str.length - 1);
								}
								this.avatar = str;
							}, 1000);
						}
					});
				});
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead1(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map(item => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise1(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						})
					);
					fileListLen++;
				}
				// console.log(this.fileList1);
			},
			uploadFilePromise1(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://sanju.xinyunweb.com/api/newupload/postImage',
						// url: 'https://chazhichashi.rchz.top/api/newupload/postImage', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: res => {
							setTimeout(() => {
								resolve(res.data.data);
								let fileList = [];
								fileList.push({
									url: JSON.parse(res.data).data
								});
								let str = '';
								for (let i = 0; i <= fileList.length - 1; i++) {
									str += fileList[i].url + ',';
								}
								if (str.length > 0) {
									str = str.substr(0, str.length - 1);
								}
								this.certificate = str;
							}, 1000);
						}
					});
				});
			},
			deletePic1(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead2(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map(item => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise2(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise2(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						// https://sanju.xinyunweb.com
						url: 'https://sanju.xinyunweb.com/api/newupload/postImage', // 仅为示例，非真实的接口地址
						// url: 'https://chazhichashi.rchz.top/api/newupload/postImage', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: res => {
							setTimeout(() => {
								resolve(res.data.data);
								let fileList = [];
								fileList.push({
									url: JSON.parse(res.data).data
								});
								let str = '';
								for (let i = 0; i <= fileList.length - 1; i++) {
									str += fileList[i].url + ',';
								}
								if (str.length > 0) {
									str = str.substr(0, str.length - 1);
								}
								this.information = str;
							}, 1000);
						}
					});
				});
			},
			deletePic2(event) {
				console.log([`fileList${event.name}`]);
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			save() {
				const { jobType } = this
				if (jobType === 0) {
					return uni.showToast({
						icon: 'none',
						title: '请选择分类',
						duration: 1000
					})
				}
				const { height, weight } = this
				var username = this.username,
					mobile = this.mobile,
					password = this.password,
					idcard = this.id_card,
					avatar = this.avatar,
					certificate = this.certificate,
					address = this.address,
					lon = this.lon,
					lat = this.lat,
					age = this.age,
					gender = this.gender,
					information = this.information;
				if (!idcard || !username || !mobile || !password) {
					wx.showToast({
						title: '请填入表单内容',
						icon: 'none'
					});
					return false;
				}
				if (!height) return uni.showToast({
					title: '请输入身高',
					icon: 'none',
					duration: 1000,
				})
				if (!weight) return uni.showToast({
					title: '请输入体重',
					icon: 'none',
					duration: 1000,
				})
				this.http('/api/index/beTeaMaster', {
					username: username,
					mobile: mobile,
					avatar: avatar,
					password: password,
					// idimage: idimage,
					certificate: certificate,
					address: address,
					lon: lon,
					lat: lat,
					age: age,
					gender: gender,
					information: information,
					job_type: jobType,
					height,
					weight
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					if (res.code == 1) {
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1500);
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	/* pages/join/join.wxss */
	page {
		background: #fff;
		padding-bottom: 100rpx;
	}

	.container {
		width: 100%;
		height: 100%;
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: border-box;
		position: relative;
		display: flex;
		flex-flow: column;

		.footer {
			margin-top: 32rpx;
		}

		.wrap {
			flex: 1;
			position: relative;
			width: 100%;

			.inner {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				padding-bottom: 32rpx;

				.scroll {
					width: 100%;
					height: 100%;
				}
			}
		}


	}

	.title {
		padding: 30rpx 30rpx 16rpx;
		font-size: 34rpx;
		color: #339966;
		box-sizing: border-box;
	}

	.title image {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}

	.form {
		width: 100%;
		display: block;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.form_li {
		border-bottom: 2px solid rgba(220, 220, 220, 0.5);
		padding: 16rpx 0;
		box-sizing: border-box;
	}

	/* 去除下边框 */
	.form_li.none_border {
		border-bottom: none;
	}

	.form_li .addpic {
		width: 160rpx;
		height: 160rpx;
		background: #f3f3f3;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.form_li .addpic image {
		width: 48rpx;
	}

	.form_li_label {
		font-size: 30rpx;
		margin-bottom: 16rpx;
	}

	.form_li_label text {
		color: #999;
	}

	.form_li_inp {
		height: 42rpx;
		line-height: 42rpx;
		font-size: 30rpx;
	}

	.form_tips {
		color: #999;
		font-size: 28rpx;
		margin: 10rpx 0;
	}

	.form_btn {
		justify-content: center;
	}

	.form_btn .btn {
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
		position: fixed;
		bottom: 60rpx;
		background-color: #46ba53;
		opacity: 1;
		border-radius: 15rpx;
		margin: 20rpx 30rpx 0;
	}

	.picker {
		position: absolute;
		bottom: 0;
		width: 100%;
	}
</style>